<template>
  <el-container class="data-content">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" :icon="Plus" @click="add"></el-button>
        <el-button type="danger" plain :icon="Delete" :disabled="selection.length==0" @click="batch_del"></el-button>
        <el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
          <el-button type="primary" :icon="Search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding ">
      <el-table ref="table" v-loading="loading" :data="tableData.data" row-key="id" @selection-change="selectionChange"
                stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="角色名称" prop="name" width="150"></el-table-column>
        <el-table-column label="别名" prop="alias" width="200"></el-table-column>
        <el-table-column label="排序" prop="sortNum" width="80"></el-table-column>
        <el-table-column label="创建时间" prop="addDate" width="180"></el-table-column>
        <el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="170">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
              <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination v-model:current-page="searchObject.no" v-model:page-size="tableData.size"
                       :page-sizes="[10, 20, 50, 100]"
                       pager-count="5" :background="background"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                       :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </el-main>
  </el-container>

  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
               @closed="dialog.save=false"></save-dialog>

  <permission-dialog v-if="dialog.permission" ref="permissionDialog"
                     @closed="dialog.permission=false"></permission-dialog>

</template>

<script>
import saveDialog from './save.vue'
import permissionDialog from './permission.vue'
import {Delete, Plus, Search} from '@element-plus/icons-vue'
import common from "@/mixins/common";

export default {
  name: 'role',
  components: {
    saveDialog,
    permissionDialog,
  },
  mixins: [common],
  data() {
    return {
      Delete: Delete,
      Plus: Plus,
      Search: Search,
      dialog: {
        save: false,
        permission: false
      },
      selection: [],
      search: {
        keyword: null
      },
      loading: false,
      tableData: {
        totalPage: 0,
        total: 0,
        size: 10
      },
      searchObject: {
        no: 1,
        size: 10,
        name: '',
      },
    }
  },
  async mounted() {
    this.getSearchList();
  },
  methods: {

    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/role/search", data);
      if (res.code === 200) {
        this.tableData = res;
      }
      this.loading = false;
    },
    //添加
    add() {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('update').setData(row)
      })
    },
    //查看
    table_show(row) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('show').setData(row)
      })
    },
    //权限设置
    permission() {
      this.dialog.permission = true
      this.$nextTick(() => {
       let roleId= this.selection[0].id;
        this.$refs.permissionDialog.open(roleId)
      })
    },
    //删除
    async table_del(row) {
      const reqData = {id: row.id};
      const res = await this.$http.form("/role/delete", reqData);
      if (res.code === 200) {
        await this.getSearchList();
        this.$message.success("删除成功")
      } else {
        this.$alert(res.message, "提示", {type: 'error'})
      }
    },
    //批量删除
    async batch_del() {
      this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
        type: 'warning'
      }).then(async () => {
        const loading = this.$loading();
        for (let i = 0; i < this.selection.length; i++) {
          let item = this.selection[i];
          await this.$http.form("/role/delete", {id:item.id});
        }


        this.getSearchList();
        loading.close();
        this.$message.success("操作成功")
      }).catch(() => {

      })
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //表格内开关
    changeSwitch(val, row) {
      row.status = row.status == '1' ? '0' : '1'
      row.$switch_status = true;
      setTimeout(() => {
        delete row.$switch_status;
        row.status = val;
        this.$message.success("操作成功")
      }, 500)
    },
    //搜索
    upsearch() {

    },
    //根据ID获取树结构
    filterTree(id) {
      var target = null;

      function filter(tree) {
        tree.forEach(item => {
          if (item.id == id) {
            target = item
          }
          if (item.children) {
            filter(item.children)
          }
        })
      }

      filter(this.$refs.table.tableData)
      return target
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode === 'create') {
        this.getSearchList();
      } else if (mode === 'update') {
        this.getSearchList();
      }
    }
  }
}
</script>

<style scoped>

.right-panel-search {
  display: flex;
  align-items: center;
}

.right-panel-search > * + * {
  margin-left: 10px;
}

.left-panel {
  display: block;
}

.right-panel {
  display: block;
  margin-top: 15px;
}

.el-header {
  background: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-header .left-panel {
  display: flex;
  align-items: center;
}

.el-header .right-panel {
  display: flex;
  align-items: center;
}
</style>
